<template>
	<div>
		<el-card
			class="box-card"
			:style="{background:color}"
		>
			<div
				slot="header"
				class="clearfix setFlex"
			>
				<el-tag type="success">{{title}}</el-tag>
				<div class="block">
					<el-tooltip
						class="item"
						effect="dark"
						content="更改背景色"
						placement="top-end"
					>
						<el-color-picker
							v-model="color"
                            size="mini"
							show-alpha
						></el-color-picker>
					</el-tooltip>
				</div>

			</div>
			<div
				id="chartPie"
				class="chart"
			></div>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: "BZT",
		data() {
			return {
				title: "当前显示： 饼状图组件",
				chartPie: null,
				color: "#FFFFFF",
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.drawPieChart();
			});
		},
		methods: {
			drawPieChart() {
				let mytextStyle = {
					color: "#333",
					fontSize: 14,
				};
				let mylabel = {
					show: true,
					position: "right",
					offset: [30, 40],
					formatter: "{b} : {c} ({d}%)",
					textStyle: mytextStyle,
				};
				this.chartPie = this.$echarts.init(
					document.getElementById("chartPie"),
					"macarons"
				);
				this.chartPie.setOption({
					title: {
						text: "",
						subtext: "",
						x: "center",
					},
					tooltip: {
						trigger: "item",
						formatter: "{a} <br/>{b} : {c} ({d}%)",
					},
					legend: {
						data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
						left: "center",
						top: "bottom",
						orient: "horizontal",
					},
					series: [
						{
							name: "访问来源",
							type: "pie",
							radius: ["50%", "70%"],
							center: ["50%", "50%"],
							data: [
								{ value: 335, name: "直接访问" },
								{ value: 310, name: "邮件营销" },
								{ value: 234, name: "联盟广告" },
								{ value: 135, name: "视频广告" },
								{ value: 1548, name: "搜索引擎" },
							],
							animationEasing: "cubicInOut",
							animationDuration: 2600,
							label: {
								emphasis: mylabel,
							},
						},
					],
				});
			},
		},
	};
</script>

<style lang="css" scoped>
</style>